<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
        >
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf - Title </title>
    <style>
        li{
            list-style: none;
            /*display: inline;*/
        }
        ul{
            padding-left:20px;
        }
        li > div > ul{
            display: none;
        }
        a{
            /*无下划线*/
            text-decoration: none;
        }
    </style>
</head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="menu-wrap" th:fragment="menu">
    <ul class="menus">
        <li class="menu" th:each="menu : ${menus}">
            <a th:if="${#lists.isEmpty(menu.subs)}" th:href="${menu.url}" th:text="${menu.title}" target="main"/>
            <span class="top-menu" th:unless="${#lists.isEmpty(menu.subs)}" th:text="${menu.title}"></span>
            <ul th:unless="${#lists.isEmpty(menu.subs)}">
                <li class="menu"  th:each="sub : ${menu.subs}">
                    <a th:href="@{${sub.url}}" th:text="${sub.title}" target="main"/>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!--上课打的代码-->
<!--<div>-->
<!--    <ul >-->
<!--        <li th:each="menu:${menus}">-->
<!--            <div>-->

<!--            </div>-->

<!--        </li>-->
<!--        &lt;!&ndash;父菜单&ndash;&gt;-->
<!--        &lt;!&ndash;如果不为空加链接, 为空显示字&ndash;&gt;-->
<!--        <li th:if="${#lists.isEmpty(menu.subs)}" >1-->
<!--            <a th:text="${menu.title}" th:href="@{${menu.url}}">aaa</a>-->

<!--        </li>-->
<!--        &lt;!&ndash;子菜单&ndash;&gt;-->
<!--        <li th:unless="${#lists.isEmpty(menu.subs)}" >&lt;!&ndash;th:text="${menu.title}"&ndash;&gt;-->
<!--            <span class="topMenu" th:text="${menu.title}"></span>-->
<!--            <ul  th:each="sub : ${menu.subs}">-->
<!--                22-->
<!--                <li th:unless="${#lists.isEmpty(menu.subs)}"  th:text="${sub.title}">33</li>-->

<!--            </ul>-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->
</body>

<script>
   $(".topMenu").click(function(){
        $(this).next().toggle();
   })

</script>
</html>